<!--用户管理页-->
<template>

  <!-- 用户搜索卡片 -->
  <el-card style="margin: 20px;height: 70px; color: #42b983">
    <el-form :inline="true">
      <el-form-item label="用户搜索">
        <el-input placeholder="输入用户名" style="width: 220px;"
                  v-model="searchUserForm.username"
                  @keydown.enter="loadUser"></el-input>
      </el-form-item>
      <el-form-item label="用户手机号">
        <el-input placeholder="输入手机号" style="width: 220px;"
                  v-model="searchUserForm.phone"
                  @keydown.enter="loadUser"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadUser"  style="background-color: #42b983">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 用户列表表格卡片 -->
  <el-card style="margin: 20px;">
    <el-table :data="userArr">
      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
      <el-table-column label="用户名" prop="username" align="center"></el-table-column>
      <el-table-column label="手机号" prop="phone" align="center"></el-table-column>
      <el-table-column label="年龄" prop="age" align="center"></el-table-column>
      <el-table-column label="性别" prop="gender" align="center"
                       :formatter="UserGenderTypeFormatter"   ></el-table-column>
      <el-table-column label="拉入黑名单" align="center">
        <template #default="scope" >
          <el-switch active-value="20" inactive-value="10" v-model="scope.row.status"
                     style="--el-switch-on-color: #13ce66 "
                     @change="changeStatus(scope.row.id,scope.row.status)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="加入时间" prop="createTime" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary"  style="color: #42b983"
                     @click="deleteUser(scope.row.id)">
          删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import axios from "axios";
import {onMounted ,ref} from "vue";
import {ElMessage} from "element-plus";
import qs from "qs";

//定义对象来保存用户查询的条件
const searchUserForm = ref({username:'',phone:''});
//定义对象保存查询到的用户表格数据
const userArr = ref([]);
//定义加载用户列表的方法
const loadUser = ()=>{
  let data = qs.stringify(searchUserForm.value);
  //如果有查询条件,就根据条件查,没有条件默认查全部数据
 axios.get(BASE_URL+'/v1/user/select?'+data)
      .then((response)=>{//回调函数,处理响应数据
        if(response.data.code===2000){//后端返回的状态码是2000说明成功了
          userArr.value = response.data.data;//把请求回来的数据装到绑定表格的数组中
          console.log(userArr.value);
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}
//页面一加载完毕,立即执行
onMounted(()=>{
  loadUser();
})

//重置搜索
const resetSearch = ()=>{
  //清空之前的搜索内容
  searchUserForm.value = {};
  //重新加载所有的用户数据
  loadUser();
}
// 对性别进行文字转换
const UserGenderTypeFormatter = (row, column, cellValue,index)=>{
  if(cellValue == 1){
    cellValue = '男';
  }else if(cellValue == 0){
    cellValue = '女';
  }
  return cellValue;
}
//定义修改员工状态的方法
const changeStatus = (id,status)=>{
  console.log(id+','+status)
  if(status==20){
    if (confirm("确定要拉入黑名单嘛") ){axios.post(BASE_URL+'/v1/user/updateStatus/'+id+'/'+status)
        .then((response)=>{
          if(response.data.code==2000){
            ElMessage.success('拉入黑名单成功!');

          }else{
            ElMessage.error(response.data.msg);
          }}
        )
    }
    loadUser();
  }
  else{
    if(confirm("确定要取消拉黑嘛")){
      axios.post(BASE_URL+'/v1/user/updateStatus/'+id+'/'+status)
          .then((response)=>{
            if(response.data.code==2000){
              ElMessage.success('取消拉入黑名单成功!');
              loadUser();
            }else{
              ElMessage.error(response.data.msg);
            }
          })
    }
    loadUser();
  }
}
//  定义删除用户的方法
const deleteUser = (id) => {
  if (confirm("确定要删除吗")){
    axios.post(BASE_URL+'/v1/user/delete/'+id).then(
        (response)=>{
          if (response.data.code==2000){
            ElMessage.success("删除成功")
            loadUser();
          }else {
            ElMessage.error(response.data.msg)
          }
        }
    )
  }

}
</script>

<style scoped>

</style>